<script setup lang="ts">
import {useScreenStore} from "@/hooks/screen";
import {skyMsgError, skyMsgSuccess} from "@/utils/sky.js";
import {
  getDatabaseTables,
  getDatabaseStructure,
  getDatabaseData,
} from "@/apis/sky/data/database";
import {DArrowLeft} from "@element-plus/icons-vue";

// 获取当前为[移动端、IPad、PC端]仓库，阔以使用 watchEffect(() => {}) 进行监听。
const {isScreen} = useScreenStore();
/** 适配移动端结束 */
const treeRef = ref();
const pageData = ref({
  props: {children: "children", label: "table", disabled: "disabled"},
  treeData: [],
  value: "设计表结构",
  options: ["设计表结构", "预览表数据"],
  pageParams: {
    tableName: "",
  },
  title: "数据库管理",
  mobile: false,
  isTree: true,
  loading: false,
  total: 0,
  tableField: [],
  columns: [],
  tableList: [],
});
const method = reactive({
  /** 数据库表关系树 */
  handleListTree: async () => {
    try {
      const res: any = await getDatabaseTables();
      pageData.value.treeData = res.data;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 选择数据库表关系树树 */
  handleCurrentChange: (val: any) => {
    if (!val.disabled) {
      pageData.value.pageParams.tableName = val.table;
      pageData.value.value = "设计表结构";
      pageData.value.tableList = [];
      method.handleListStructure();
    }
  },
  /** 显示树或隐藏树 */
  handleIsTreeOrTable: () => {
    setTimeout(() => {
      pageData.value.mobile = !pageData.value.mobile;
      pageData.value.isTree = !pageData.value.isTree;
    }, 500);
    skyMsgSuccess("切换成功");
  },
  /** 切换分段器 */
  handleSegChange: (row: any) => {
    if (pageData.value.pageParams.tableName) {
      if (row === "设计表结构") {
        method.handleListStructure();
      } else {
        method.handleListPage();
      }
    }
  },
  /** 获取表结构 */
  handleListStructure: async () => {
    try {
      pageData.value.loading = true;
      pageData.value.tableField = [];
      const res: any = await getDatabaseStructure(pageData.value.pageParams.tableName);
      pageData.value.tableField = res.data;
    } catch (error) {
      skyMsgError(error);
    }
    pageData.value.loading = false;
  },
  /** 获取表数据 */
  handleListPage: async () => {
    try {
      pageData.value.loading = true;
      pageData.value.tableList = [];
      const res: any = await getDatabaseData(pageData.value.pageParams.tableName);
      pageData.value.tableList = res.data;
      if (res.data.length > 0) {
        pageData.value.columns = Object.keys(pageData.value.tableList[0]);
      }
    } catch (error) {
      skyMsgError(error);
    }
    pageData.value.loading = false;
  },
});
onMounted(() => {
  pageData.value.mobile = isScreen.value;
  method.handleListTree();
});
</script>

<template>
  <div class="sky-flex">
    <div v-if="pageData.isTree" class="treeList sky-flex mr2">
      <SkyCard>
        <!-- 数据字典 -->
        <SkyTree
          ref="treeRef"
          tree-name="数据库"
          :props="pageData.props"
          :treeData="pageData.treeData"
          node-key="name"
          @currentChange="method.handleCurrentChange"
        />
        <!-- 显示表格 -->
        <div v-if="pageData.mobile" class="right">
          <el-tooltip content="显示表格" placement="top">
            <el-button circle icon="DArrowRight" @click="method.handleIsTreeOrTable"/>
          </el-tooltip>
        </div>
      </SkyCard>
    </div>
    <div v-if="!pageData.mobile" class="tableList sky-flex">
      <SkyCard>
        <!-- 分段选择 -->
        <div class="flex flex-col items-start gap-4 mb-5">
          <el-segmented v-model="pageData.value" :options="pageData.options" @change="method.handleSegChange"/>
          <el-button v-if="isScreen" circle @click="method.handleIsTreeOrTable">
            <template #icon>
              <el-tooltip content="显示数据字段" placement="top">
                <el-icon>
                  <DArrowLeft/>
                </el-icon>
              </el-tooltip>
            </template>
          </el-button>
        </div>
        <!-- 表结构 -->
        <el-table
          v-if="pageData.value === '设计表结构'"
          v-loading="pageData.loading"
          border
          :data="pageData.tableField"
          empty-text="暂时没有数据哟🌻"
        >
          <el-table-column label="字段名" prop="field" width="220" align="center">
            <template #default="scope">
              <el-input style="text-align: center;" v-model="scope.row.field"/>
            </template>
          </el-table-column>
          <el-table-column label="字段类型" prop="type" width="220" align="center">
            <template #default="scope">
              <el-select v-model="scope.row.type">
                <el-option :label="scope.row.type" :value="scope.row.type"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否为空" prop="is_null" width="120" align="center">
            <template #default="scope">
              <el-checkbox v-model="scope.row.is_null" true-value="YES" false-value="NO"/>
            </template>
          </el-table-column>
          <el-table-column label="键信息" prop="key" width="220" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.key"/>
            </template>
          </el-table-column>
          <el-table-column label="默认值" prop="default" width="220" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.default"/>
            </template>
          </el-table-column>
          <el-table-column label="额外信息" prop="extra" width="220" align="center">
            <template #default="scope">
              <el-input v-model="scope.row.extra"/>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表数据 -->
        <el-table
          v-else
          v-loading="pageData.loading"
          border
          :data="pageData.tableList"
          empty-text="暂时没有数据哟🌻"
        >
          <el-table-column
            v-for="item in pageData.columns"
            :key="item"
            :label="item"
            :prop="item"
            width="180"
            :show-overflow-tooltip="true"
            align="center"
          />
        </el-table>
      </SkyCard>
    </div>
  </div>
</template>

<style scoped lang="scss">
.sky-flex {
  flex-direction: row;

  .treeList {
    position: relative;
    width: 18%;

    .right {
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }

  .tableList {
    width: 82%;
  }

  .formTree {
    width: 23%;
  }

  .form {
    width: 77%;
  }
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: row;
  justify-content: space-between;
}
</style>
